import React, { useState, useEffect } from 'react'
import { NoticeBar, TextArea, Swiper, } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
// import {  Image } from 'react-vant'
import style from '../styles/home.module.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
axios.defaults.baseURL = 'http://localhost:3000'


export default function Home() {
    const [notice, setNotice] = useState([])
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const imgs = ['./img/home1.png', './img/home2.png']

    useEffect(() => {
        getNotice()
    }, [])

    const getNotice = async () => {
        let res = await axios.get('/lyc/getnotice')
        console.log(res.data.data, 'notice111');
        if (res.data.code === 200) {
            setNotice(res.data.data)
        }

    }
    const [ws, setWs] = useState(null);
    const [isConnected, setIsConnected] = useState(false);
    useEffect(() => {
        const webSocket = new WebSocket("ws://127.0.0.1:3000");
        setWs(webSocket);

        webSocket.addEventListener("open", () => {
            console.log("WebSocket 连接已打开");
            setIsConnected(true);
        });

        webSocket.addEventListener("error", (error) => {
            console.error("WebSocket 错误:", error);
        });

        webSocket.addEventListener("close", () => {
            console.log("WebSocket 连接已关闭");
            setIsConnected(false);
        });

        webSocket.onmessage = (event) => {
            try {
                const message = event.data;
                if (typeof message !== "string") {
                    console.error("消息不是字符串:", message);
                    return;
                }
                const parsedMessage = JSON.parse(message);
                const { type, content } = parsedMessage;

                switch (type) {
                    case "Notices":
                        console.log("公告消息:", content);
                        getNotice();
                        alert('有一条新公告')
                        break;
                    case "heartbeat":
                        console.log("心跳消息:", content);
                        break;
                    case "reminding":
                        console.log("消息更新:", content);
                        break;
                    default:
                        console.warn("无效的消息类型:", type);
                        break;
                }
            } catch (error) {
                console.error("解析消息时出错:", error);
            }
        };

        return () => {
            webSocket.close();
        };
    }, [])
    return (
        <div className={style.home}>
            {/* 头部    地图+首页 */}
            <div className={style.title}>
                <p>首页</p>
            </div>
            {/* 公告轮播 */}
            <div className={`${style.slideshow} ${style.container}`}>
                {/* <img src="./img/home1.png" alt="" style={{ width: '100%', height: '190px' }} /> */}
                <Swiper
                    loop
                    autoplay
                >
                    {imgs.map((item, index) => {
                        return <Swiper.Item key={index}>
                            <img src={item} alt="" style={{ width: '100%', height: '190px' }} />
                        </Swiper.Item>
                    })}
                </Swiper>
            </div>
            {/* 提示公共 */}
            <div className={`${style.header_bottom} ${style.container}`}>
                {notice.length > 1 && (
                    <NoticeBar onClick={() => { navigate('/notice_detail') }} content={notice[notice.length - 1].content} color='alert' />
                )}
            </div>
            {/* 跳转板块 */}
            <div className={`${style.main} ${style.container}`}>
                <div className={style.main_one}>
                    <div className={style.top}>
                        <img src='./img/生活缴费.png' alt="" style={{ width: '80%', height: '80%', margin: '10px 8px' }} />
                    </div>
                    <div className={style.bottom}>生活缴费</div>
                </div>
                <div className={style.main_one}>
                    <div className={style.top}>
                        <img src='./img/访客邀请.png' alt="" style={{ width: '80%', height: '80%', margin: '10px 8px' }} />
                    </div>
                    <div className={style.bottom}>访客邀请</div>
                </div>
                <div className={style.main_one}>
                    <div className={style.top}>
                        <img src='./img/维修上报.png' alt="" style={{ width: '80%', height: '80%', margin: '10px 8px' }} />
                    </div>
                    <div className={style.bottom}>维修上报</div>
                </div>
                <div className={`${style.main_one} `} onClick={() => { navigate('/houserent') }}>
                    <div className={style.top}>
                        <img src='./img/房屋租赁1.png' alt="" style={{ width: '80%', height: '80%', margin: '10px 8px' }} />
                    </div>
                    <div className={style.bottom} >房屋租赁</div>
                </div>
            </div>
            {/* 社区活动 */}
            <div className={`${style.activity} ${style.container}`}>
                <div className={style.activity_title}>
                    社区活动
                    <span>查看全部 <RightOutline /> </span>
                </div>
                <div className={style.activity_one}>
                    <img src='https://ts1.cn.mm.bing.net/th/id/R-C.e968e0f601c22ca7b910fe121dbe3994?rik=trO2sc9ASWg09g&riu=http%3a%2f%2filonggang.sznews.com%2fjdxl%2fpic%2f2018-05%2f23%2fe11c186d-96ae-474b-b4e4-349b7fe2d270.jpg&ehk=kn0yEkFqlzL2VJx3l7z0qcYbwNzoQ1tmxFQ1aEXRC4A%3d&risl=&pid=ImgRaw&r=0' alt="" style={{ width: '100px', height: '100px' }} />
                    <div className={style.activity_right}>
                        <h2>社区义工招募</h2>
                        <p>物业服务中心  <span>2024-11-01</span></p>
                    </div>
                </div>
                <div className={style.activity_one}>
                    <img src='https://x0.ifengimg.com/ucms/2019_50/E7EF1A16DE5DFE39A5C15A0E0795A9FB9DBCF637_w1268_h848.jpg' alt="" style={{ width: '100px', height: '100px' }} />
                    <div className={style.activity_right}>
                        <h2>社区健康讲座</h2>
                        <p>物业服务中心  <span>2024-11-02</span></p>
                    </div>
                </div>
                <div className={style.activity_one}>
                    <img src='https://ts1.cn.mm.bing.net/th/id/R-C.6d2a49c2e9080e30186c93572ccf7d2c?rik=JJLqaQzSz0lWrA&riu=http%3a%2f%2fwww.xiangqiao.gov.cn%2fimg%2f0%2f42%2f42115%2f3696649.jpg&ehk=j557Wck9ypAmZbVWC5MOmRTJE1mN6WU6EBpP0%2fgcu5c%3d&risl=&pid=ImgRaw&r=0' alt="" style={{ width: '100px', height: '100px' }} />
                    <div className={style.activity_right}>
                        <h2>美食分享会</h2>
                        <p>物业服务中心  <span>2024-11-01</span></p>
                    </div>
                </div>
                <div className={style.activity_one}>
                    <img src='https://ts1.cn.mm.bing.net/th/id/R-C.7455891f5a6d361ad5594336640f3f81?rik=f6Trp2VrMmXKYA&riu=http%3a%2f%2fmzj.yzcity.gov.cn%2fmzj%2f0202%2f202104%2f2e4355cf6b084d11a78447e286068c4c%2fimages%2ff38c9289c162467a8f49469b330399b4.png&ehk=EFj8wvwXUAy6ra%2brvemQaDWfhaKWs7L8tEHPWPqZ9ck%3d&risl=&pid=ImgRaw&r=0' alt="" style={{ width: '100px', height: '100px' }} />
                    <div className={style.activity_right}>
                        <h2>环保知识普及</h2>
                        <p>物业服务中心  <span>2024-11-01</span></p>
                    </div>
                </div>
                <div className={style.activity_one}>
                    <img src='https://ts1.cn.mm.bing.net/th/id/R-C.150de73d8cbd8110b69eae349ca1bf3f?rik=ESqwZLLNn0qZgA&riu=http%3a%2f%2f15744409.s21i.faiusr.com%2f2%2fABUIABACGAAg2cnp3gUorpqJzgcwoAs4uAg.jpg&ehk=Dt3dz1mjYyoI%2fcZ%2bsQSaS7cVbnyLo3BbHHts7cS%2fc2c%3d&risl=&pid=ImgRaw&r=0' alt="" style={{ width: '100px', height: '100px' }} />
                    <div className={style.activity_right}>
                        <h2>美食分享会</h2>
                        <p>物业服务中心  <span>2024-11-06</span></p>
                    </div>
                </div>
            </div>
        </div>
    )
}
